<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ms-class</title>
		<style type="text/css">
			.form{
				width: 80%;
				margin: auto;
				margin-top: 100px;
			}
			.form>div>ul{
				display: none;
			}
			.form>div.on>ul{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="form"  ms-controller="ms-class">
			<div ms-class="on:beshow">
				<button ms-click="onBtnClick">{{beshow?"隐藏":"显示"}}列表</button>
				<ul>
					<li>a</li>
					<li>a</li>
					<li>a</li>
					<li>a</li>
				</ul>
			</div>
		</div>
		<script src="../avalon.1.39.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			var vmodel=avalon.define({
				$id:"ms-class",
				beshow:false,
				onBtnClick:function(){
					vmodel.beshow=!vmodel.beshow;
				}
			})
		</script>
	</body>
</html>
